import React from 'react';
import { Button, Table, Card, Modal, message, Icon, Tooltip } from 'antd';
import { deleteServiceType } from '../../services/api';
import { connect } from 'dva';
import PersonModal from './indexModal';
import './index.css';

const confirm = Modal.confirm;

class Service extends React.Component {

	componentDidMount() {
		this.props.dispatch({type: 'example/setServiceType', res: !this.props.serviceType })
	}
	
	state = {
		//表格数据
		dataSource: [],
		//修改数据
		serviceType: {},
		//操作类型
		optionType: "",
		selectionData:[],
		infoArr:[],
		loading:false,
	};

	columns = [{
		title: '服务名称',
		className: 'columnTitle',
		dataIndex: 'fName'
	}, {
		title: '服务描述',
		className: 'columnTitle',
		dataIndex: 'fDesc'
	}, {
		title: '收费类型',
		className: 'columnTitle',
		dataIndex: 'fChargeTypeName'
	},{
		title: '价格（元）',
		className: 'columnTitle',
		dataIndex: 'fPrice'
	}, {
		title: '操作',
		className: 'columnTitle',
		key: 'desc',
		width: 100,
		render: (text, record) => (  <span>
			<Tooltip title="修改">
			<Icon type="form" onClick={() => this.updataServiceType(record)} className='tableBtn'/>
			</Tooltip>
			</span> )
	}];

	/** 
	 * 表格数据选中
	*/
	checkedChange = (selectedRowKeys, selectedRows) => {
		this.setState({
			selectionData: selectedRowKeys,
			infoArr:selectedRows
		});
	}

	/** 
	 * 删除
	*/
	delete = () => {	
		let that = this;
		let len = this.state.infoArr.length;
		if(len <= 0) {
			message.warning('请至少选择一条您要进行操作的数据');
			return;
		}
		confirm({
			title: '是否确定删除已勾选数据?',
			content: `已选择 ${len} 条数据，删除后将无法追回`,
			okText: '确认',
    		cancelText: '取消',
			onOk() {
				that.deleteServiceType({fIds:that.state.selectionData});
			},
			onCancel() {
					
			},
		});
	}

	/**
	 * 删除服务
	 * @param {} param 
	 */
	async deleteServiceType (param) {
		let res = await deleteServiceType(param);
		if(res.code === 200){
			this.setState({
				selectionData:[],
			},()=>{
				this.props.dispatch({type: 'example/setServiceType', res: !this.props.serviceType });	
			})	
			message.success('删除成功');	
		}else {
			message.error(res.msg);
		}
	}

	/**
	 * 添加服务按钮
	 */
	insertServiceType = () => {
		this.setState({serviceType: "", optionType: "insert"})
		this.operateModal();
	}

	/**
	 * 修改服务按钮
	 */
	updataServiceType (record) {
		this.setState({serviceType: record, optionType: "update"})
		this.operateModal();
	}

	/** 
	 * 模态框操作
	*/
	operateModal = () => {
		this.props.dispatch({type: 'example/setPersonalModal', res: !this.props.personalModal});
	}

	render() {
		const rowSelection = {
			onChange: this.checkedChange
		};
		return (
			<div style={{padding: '20px 40px'}}>
				<div className="search">
				  <Button  type="primary" onClick={()=>this.insertServiceType()}>新增</Button>
				  <Button type="danger"  onClick={()=>this.delete()} >删除</Button>
				</div>
				<Card>
					<Table
						rowSelection={rowSelection}
						rowKey={record => record.fId}
						style={{marginBottom: 20}}
						columns={this.columns}
						dataSource={this.props.serviceType}
						pagination={false}
						locale={{
							emptyText: '暂无数据'
						}}
					/>
				</Card>
				<PersonModal visable={this.props.personalModal} operateModal={this.operateModal} data={this.state.serviceType} optionType={this.state.optionType} />
			</div>
		)
	}
}

export default connect((state)=>({
	personalModal: state.example.personalModal,
	serviceType: state.example.serviceType,
  }))(Service)